<template>
  <view class="video-reward" v-if="config.rewardType===1">
    <view v-if="config.hasFinishReward===0">
      <cmd-progress type="circle" :stroke-width="10" :width="120" stroke-shape="square"
                    :percent="percent"
                    stroke-color="#ffc900"></cmd-progress>
      <view class="reward-img">
        <image class="hongbao" :style="num===0?'z-index:1':''" mode="aspectFit"
               :src="image_hosts+'hongbao1.png'"></image>
        <image class="hongbao" :style="num===1?'z-index:1':''" mode="aspectFit"
               :src="image_hosts+'hongbao2.png'"></image>
        <view class="jinbi">
          <image :style="jinbiStyle" :src="image_hosts+'jinbi.png'"></image>
        </view>
        <view v-if="num===1" class="title">+{{ config.typeVal }}</view>
      </view>
    </view>
    <view v-if="config.hasFinishReward===1" class="message">
      今日奖励<br/>已领取
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      image_hosts: this.image_host + 'video/',
      jinbiStyle: '',
      num: 0,
      percent: 0,
      config: {
        copyNumber: 0,//阶段次数
        hasFinishReward: 0,//是否完成奖励：0未完成，1全部完成
        rewardType: 0,//奖励类型,1观看时长，2视频个数
        typeVal: '',//奖励值
        rewardPace: '',//奖励进度
        index: 0,//第几轮
        num: 0,//第几个
      },
      indexTime: [0, 40, 60, 120, 180],
      // indexTime: [0, 4, 6, 12, 18],
      rewardStatus: false,
      time: 0,
      videoId: "",
      setIntervalObj: {}
    }
  },
  created() {
    this.utils.clearIntervalAll('videoRewardSetIntervalAll')
    this.getConfig()
  },
  methods: {
    // 获取奖励配置
    async getConfig() {
      let data = await this.$NoteApi.doRequest("get", 'ruiVideo/getCustomerRewardType', '', '');
      if (data?.data?.data) {
        let {copyNumber, hasFinishReward, rewardType, typeVal, rewardPace} = data.data.data;
        this.config.copyNumber = copyNumber;
        this.config.hasFinishReward = hasFinishReward;
        this.config.rewardType = rewardType;
        this.config.typeVal = typeVal;
        this.config.rewardPace = rewardPace;
        // 设置状态
        this.$emit("setRewardType", rewardType)
        if (rewardType === 1 && hasFinishReward === 0) {
          this.config.index = rewardPace.split("-")[0]
          this.config.num = rewardPace.split("-")[1]
          this.setPercent()
        }
      }
    },
    // 设置状态
    setRewardStatus(status, videoId) {
      this.rewardStatus = status
      this.videoId = videoId
    },
    // 设置进度
    setPercent() {
      this.setIntervalObj = setInterval(() => {
        if (this.rewardStatus) {
          this.time++
          this.percent = (this.time / this.indexTime[this.config.index]) * 100
          if (this.time >= this.indexTime[this.config.index]) {
            this.sendLog()
          }
          // console.log('进度：',this.percent,'观看秒数',this.time+'/'+this.indexTime[this.config.index])
        }
      }, 1000)
      let videoRewardSetIntervalAll = uni.getStorageSync('videoRewardSetIntervalAll') || [];
      videoRewardSetIntervalAll.push(this.setIntervalObj)
      uni.setStorageSync('videoRewardSetIntervalAll', videoRewardSetIntervalAll)
    },
    init() {
      this.num = 0
      this.jinbiStyle = "margin-top:0px;opacity: 0;"
    },
    // 发送日志
    async sendLog() {
      // 暂停定时器
      clearTimeout(this.setIntervalObj)
      let res = await this.$NoteApi.doRequest('post', 'action/onlineReport', {videoId: this.videoId}, 'json')
      if (res.data.code === 0) {
        this.time = 0
        // 执行动画
        await this.get()
        // 获取进度
        this.getConfig()
      } else {
        uni.showToast({title: res.data.message, icon: 'none'})
      }
    },
    get() {
      return new Promise((resolve, reject) => {
        this.num = 1
        this.jinbiStyle = "margin-top:30px;opacity: 1;"
        setTimeout(() => {
          this.init()
          return resolve(true)
        }, 2000)
      })
    }
  },
}
</script>

<style scoped lang="scss">
.video-reward {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.reward-img {
  width: 120upx;
  height: 120upx;
  position: absolute;
  top: 0;
  right: 0;

  .hongbao {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .jinbi {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -10px;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, 0);
    z-index: 4;

    image {
      transition: margin-top 2s linear;
      width: 100%;
      height: 100%;
      margin-top: 0;
      opacity: 0;
    }
  }

  .title {
    width: 100%;
    position: absolute;
    bottom: 10px;
    text-align: center;
    font-size: 30upx;
    color: #ffc900;
    z-index: 2;
    font-weight: 700;
  }
}

.message {
  font-size: 26upx;
  background-color: rgba(0, 0, 0, .6);
  color: red;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
}
</style>
